import React, { Component } from 'react';

import {
    View,
    StyleSheet,
    Image,
    TouchableHighlight,
    Platform,
    Dimensions
} from 'react-native';

import PropTypes from "prop-types";
import Label from '../label';
import Color from "../../config/theme/standard/color";
import FontSize from "../../config/theme/standard/fonts";

export default class Selection extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isWideScreen: false // 鸿蒙适配是否宽屏
        }
    }

    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }
    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        if (screenWidth) {
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800
            })
        }
    }

    _onPress(){
        if(typeof(this.props.onPress) === 'function'){
            this.props.onPress();
        }
    }

    clickTitleIcon =()=>{
        if(typeof(this.props.titleIconFunc) === 'function'){
            this.props.titleIconFunc();
        }
    }


    render() {
        const sWidth = Dimensions.get('window').width;
        const props = this.props;
        const containerStyles = [styles.container];
        const dividerStyles= [styles.divider];
        let text = null;
        let selected = false;
        if(!props.value && props.placeHolder != ''){
            text = props.placeHolder;
        }else if(!props.value && props.placeHolder == ''){
            text = '';
        }else{
            text = props.value;
            selected=true;
        }
        dividerStyles.push({width:Dimensions.get('window').width})
        let imgItem = null;
        let captionsItem = null;
        let descriptionItem = null;
        let labelColor = null;

        if(props.hasArrow){
            imgItem = <View style={[styles.imageContainer, Platform.OS == 'harmony' &&{ zIndex:1 }]}><Image
                source = {require('../../assets/selection_arrow_right.png')}
                style = {styles.image}/></View>;
        }else{
            containerStyles.push({paddingRight:15});
        }

        if(props.disabled){
            labelColor = Color.selection.disbale;
        }else{
            if(selected){
                labelColor =Color.selection.select;
            }else{
                labelColor = Color.selection.placeholder;
            }
        }
        
        if(props.captions != ''){
            captionsItem = <View style={styles.captionsContainer}>
                <Label  labelStyle={{color:Color.selection.caption,fontSize:FontSize.selection.captionFontSize,fontWeight:'400'}} text={props.captions}
                numberOfLines={props.isLimitCaptions ? 1 : null}/>
            </View>;
            containerStyles.push({ minHeight: 67 });
        }
        

        if (props.description != '' && props.rightItem == null) {
            let descriptionColor = props.showErrorInfo ? Color.selection.error : Color.selection.description;
            descriptionItem = <View style={styles.descriptionContainer}>
                <Label labelStyle={{color:descriptionColor,fontSize:FontSize.selection.descriptionFontSize,fontWeight:'400'}} text={props.description}  numberOfLines={props.isLimitDesc ? 1 : null}/>
            </View>;
            containerStyles.push({ minHeight: 67 });
        }



        if(props.isMerge) {
            dividerStyles.push({width: sWidth-15, marginLeft: 15})
        }

        if(props.hasTopBorder) {
            containerStyles.push({ borderTopWidth: 1 });
        }

		let titleCon = [styles.titleContainer];
		if(props.isRequired || props.titleIcon){
			titleCon.push({justifyContent: 'flex-start',flexDirection: 'row',alignItems:'center'});
		}

        let fontFamily = Platform.OS === 'ios' ? 'System' : 'Roboto';
        let contentWidth = sWidth-props.leftContainerWidth-15;
        if(props.hasArrow){
            contentWidth = contentWidth - 20;
        }
        let title = this.props.isLimitTitle ? props.title.length > 7 ? props.title.slice(0, 6) + '...' : props.title : props.title
        let areaContent = (
            <View>
                    <View style={containerStyles}>
                        <View style={[{width:props.leftContainerWidth-15}]}>
                            <View style={titleCon}>
                                <Label  text={title}  labelStyle={[props.titleStyle,{color:Color.selection.title,fontSize:FontSize.selection.titleFontSize,fontWeight:'400'}
                                ]}/>
                                {props.isRequired ? <Image
                                    source={require('../../assets/selection_star.png')}
                                    style={{height:8,width:8,resizeMode:'contain',marginLeft:3}} /> : null}

                                         {
                                  
                                  props.titleIcon && 
                                  <TouchableHighlight
                                  activeOpacity={0.6}
                                  underlayColor='transparent'
                                  onPress={()=>{this.clickTitleIcon()}}
                                  style={{marginLeft:2}}
                                  >
                                  
                                  <Image
                                  source={props.titleIcon}
                                  style={{height:14,width:14,resizeMode:'contain'}} 
                                  />
                                  </TouchableHighlight>
                                  
                                  }

                            </View>
                            {captionsItem}
                        </View>
                        <View style={[styles.rightContainer,{width:contentWidth,alignItems: this.props.textAlign ==='left' ? "flex-start": "flex-end"}]}>
                            <View style={styles.textContainer}>
                                <Label text={text} fontFamily={fontFamily} labelStyle={{color:labelColor,fontSize:FontSize.selection.valueFontSize,fontWeight:'400'}} numberOfLines={props.isLimitValue ? 1 : null}/>
                            </View>
                            {descriptionItem}
                        </View>
                        {imgItem}
                    </View>
                    <View style={dividerStyles} />
                </View>
        );
        if(Platform.OS === 'web'){
            return (
                <TouchableHighlight
                    activeOpacity={0.6}
                    underlayColor='transparent'
                    onClick={()=>this._onPress()}
                    disabled={props.disabled}>
                        {areaContent}
                </TouchableHighlight>
            );
        }else{
            return (
                <TouchableHighlight
                    activeOpacity={0.6}
                    underlayColor='transparent'
                    onPress={()=>this._onPress()}
                    disabled={props.disabled}>
                        {areaContent}
                </TouchableHighlight>
            );
        }    
    }
};

Selection.propTypes = {
    value: PropTypes.string,
    title: PropTypes.string,
    captions: PropTypes.string,
    description: PropTypes.string,
    onPress: PropTypes.func,
    placeHolder: PropTypes.string,
    hasArrow: PropTypes.bool,
    disabled: PropTypes.bool,
    isMerge: PropTypes.bool,
    //是否跨行合并
    hasTopBorder: PropTypes.bool,
    //是否有上边框
    showErrorInfo: PropTypes.bool,
    leftContainerWidth:PropTypes.number,
    //是否开启错误提示
    //defaultValue: PropTypes.string,
    //推荐选择项
    //errorInfo: PropTypes.string,
    //错误提示语
    //当前选中项与推荐选择项不符，且开启错误提示时，展示错误提示语
    //右侧元素
    rightItem : PropTypes.any,
    //标题文字样式
    titleStyle: PropTypes.any,
    //是否为必输项（显示红色*号）
    isRequired: PropTypes.bool,
    textAlign:PropTypes.string,
    titleIcon:PropTypes.any,
    titleIconFunc:PropTypes.func,
     //是否限制标题字数
     isLimitTitle: PropTypes.bool,
     //是否限制placeHolder/Value字数
     isLimitValue: PropTypes.bool,
     //是否限制说明文字字数
     isLimitDesc: PropTypes.bool,
     //是否限制标题说明文字字数
     isLimitCaptions:PropTypes.bool,
};
Selection.defaultProps = {
    title:'',
    captions:'',
    description: '',
    hasArrow: true,
    disabled: false,
    isMerge: false,
    hasTopBorder: false,
    showErrorInfo: false,
    rightItem:null,
    leftContainerWidth: 125,
    placeHolder:'请选择',
    isRequired: false,
    textAlign:'left',
    //是否限制标题字数
    isLimitTitle: false,
    //是否限制placeHolder/Value字数
    isLimitValue: false,
    //是否限制说明文字字数
    isLimitDesc: false,
    //是否限制标题说明文字字数
    isLimitCaptions:false,
};

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        //alignItems:'center',
        alignItems:'flex-start',
        paddingTop:12,
        paddingBottom:12,
        //justifyContent: 'space-between',
        borderColor: Color.border,
        paddingLeft: 15,
        paddingRight: 36,
        minHeight: 44,
    },

    leftContainer:{
        width: 100,
    },

    rightContainer: {
        flexDirection: 'column'
    },

    textContainer: {
        justifyContent: 'center'
    },

    titleContainer:{
        justifyContent: 'center'
    },

    imageContainer:{
        position: 'absolute',
        right: 8,
        top:8
    },

    image:{
        width: 28,
        height: 28,
        resizeMode:'contain'
    },

    captionsContainer:{
        justifyContent: 'flex-end',
        marginTop:5
    },

    descriptionContainer:{
        justifyContent: 'flex-end',
        marginTop:5
    },

    divider:{
        height: 1,
        backgroundColor: Color.border,
    }
});
